import React, {Component} from 'react';
import Start from "./help/Start";
import Stop from "./help/stop";
import DiscreteSlider from "./help/DiscreteSlider";
import SimpleSelectForAlgorithm from "./SimpleSelectForAlgorithm";
import "bootstrap/dist/js/bootstrap.bundle"
import "bootstrap/dist/css/bootstrap.css"
import $ from "jquery"
import "jquery-ui/jquery-ui"
import Input from "./help/Input";


const textAreaInput = "4 5\n" +
    "0 1 4\n" +
    "1 2 5\n" +
    "2 3 17\n" +
    "1 3 10\n" +
    "2 1 5";

const p_0 = "Note:";
const p_1 = ">> Line 1: input the number of vertices and edges seperated by a space.";
const p_2 = ">> Line edges: input start, end and positive weight seperated by a space.";

const p_3 = ">> All inputs should be positive integers under 100.";

const generateNumber = (start, end) => {
    let items = [];
    for (let i = start; i <= end; i++) {
        items.push(i);
    }
    return items;
}



class Menu extends Component {
    generateN = (n) => {
        let a = []
        for (let i = 0; i < n; i++) {
            a.push(i);
        }
        return a;
    }



    componentDidMount = () => {
            $(function(){
        $(".modal-dialog").draggable({cancel : '.modal-body'});
        // $(".modal-dialog").draggable({cancel : '.btn'});
    });
    };

    // 获取输入
    getInput = (algo=0) => {
        const onChange = () => {
          let inputElement = document.getElementById("input");
          let string = inputElement.value;
          string = string.replaceAll(/\s/g, "");
          string = string.replaceAll(/\d{3}/g, "");
          string = string.replaceAll(/\s\s/g, " ");
          string = string.replaceAll(/\s,/g, ",");
          string = string.replaceAll(/,,/g, ",");
          string = string.replaceAll(/[^0-9,\s]/g, "");
          inputElement.value = string;
          this.props.handleInput();
        }
        let input = (
            <React.Fragment >
                    <div className="me-2 align-self-center">
                  <button type="button" className="btn btn-primary" style={{whiteSpace: "nowrap", cursor: "not-allowed", marginBottom: "2px"}} data-bs-toggle="modal"
                          >Input
                  </button>
                </div>

                    <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light" style={{marginBottom: "2px"}}>
                    <div className="input-group input-group-sm ml-2 mr-2"
                         style={{position: "relative", width: "30vw", height: "64px", lineHeight: "64px"}}>
                    <input id= "input" type="text" className="form-control" aria-label="Sizing example input"
                               aria-describedby="inputGroup-sizing-default" placeholder="1,2,3,4..."
                           onChange={onChange}
                           style={{height: "70%", fontSize: "1.2em" ,position:"relative", top: "50%", transform: "translate(0px, -50%)"}}
                        />
                    </div>
                </div>
                </React.Fragment>
        );
        return input;
    }


    render = () => {
        let algo = this.props.algo;
        return (
            <div className="container-fluid"  id="menu">
<div className="row">
            <div className="w-100 d-flex flex-wrap" >

                <div className="me-2 align-self-center" style={{marginBottom: "2px", float: "left"}}>
                  <button type="button" className="btn btn-success" style={{whiteSpace: "nowrap"}}
                          id="newRandomGraphButton" onClick={this.props.onGenerate}>Generate
                  </button>
                </div>

                {this.getInput()}

                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light" style={{marginBottom: "2px", float: "left"}}>
                    <SimpleSelectForAlgorithm
                        pos={0}
                        label={'Algorithm'}
                        items={['Selection Sort', 'Insertion Sort', 'Bubble Sort', 'Merge Sort']}
                        onValueChanged={this.props.setAlgo}
                    />
                </div>



                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light" style={{marginBottom: "2px", float: "left"}}>
                    <DiscreteSlider
                        handleSpeed={this.props.handleSpeed}
                    />
                </div>

                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light" style={{marginBottom: "2px", float: "left"}}>
                    <Start
                        handlePaused = {this.props.handlePaused}
                        select = {this.props.select}
                    onStart={this.props.onStart}
                    />
                </div>

                <div className="me-2 d-flex align-items-center justify-content-center rounded ps-3 pe-3 bg-light" style={{marginBottom: "2px", float: "left"}}>
                    <Stop
                    onReset={this.props.onReset}
                    />
                </div>

            </div>
</div>
                </div>
        );
    }
    isClickable = () =>
        {
            if (this.props.disable) {
                return {cursor: "not-allowed"};
            } else {
                return {};
            }
        }
    }


    export default Menu;